<template>
<div class="app-container">
    <el-row class="row">
      <el-col :span="12">
        <div class="grid-content bg-purple-dark">
            <el-button type="primary" v-if="tabE==0" icon="el-icon-delete-solid" @click="BatchReview()">批量审核</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 视频管理列表（已通过） -->
    <el-table
    :data="ReviewData"
    border
    v-loading="loading"
    style="width: 100%"
    height="380">
    <el-table-column
      fixed
      width="50"
      type="selection"
      align="center">
    </el-table-column>
    <el-table-column
      fixed
      prop="videoId"
      label="视频编号"
      width="150"
      align="center">
    </el-table-column>
    <el-table-column
      prop="videoDesc"
      label="视频文案"
      width="200"
      align="center">
      <template slot-scope="scope">
        <div v-if="scope.row.videoDesc.length > 5">
          <div class="ellipsis" v-tooltip :content="scope.row.videoDesc">
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              :content="scope.row.videoDesc">
              <span slot="reference">{{ scope.row.videoDesc }}</span>
            </el-popover>
          </div>
        </div>
        <div v-else>{{ scope.row.videoDesc }}</div>
      </template>
    </el-table-column>
    <el-table-column
      prop="province"
      label="视频封面"
      width="120"
      align="center">
      <template slot-scope="scope">
        <el-image style="width: 95px; height: 95px" @click="onImage(scope.row.coverNumber)" :src="`http://101.43.223.224:8765/image/getImageById?id=${scope.row.coverNumber}`" :preview-src-list="srcList"></el-image>
      </template>
    </el-table-column>
    <el-table-column
      prop="city"
      label="播放视频"
      width="120"
      align="center">
      <template slot-scope="scope">
        <el-button type="primary" @click="onVideo(scope.row.videoNumber)" icon="el-icon-video-play">播放</el-button>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="视频话题"
      width="180"
      align="center">
      <template slot-scope="scope">
        <div v-for="(item,index) in scope.row.videoTopic.split(',')" :key="index">
          <el-tag style="margin-top:5px">{{ item }}</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="userAccount"
      label="上传账号"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="creationTime"
      label="上传时间"
      width="160"
      align="center">
    </el-table-column>
    <el-table-column
      prop="videoHeight"
      label="视频高度(rpx)"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="reviewStatus"
      label="审核状态"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100"
      align="center">
      <template slot-scope="scope">
        <el-button v-if="tabE==0" @click="review(scope.row)" type="primary" size="small">审核</el-button>
        <el-button v-if="tabE==1" @click="deleteVideo(scope.row)" type="primary" size="small">下线</el-button>
        <el-button v-if="tabE==2" @click="HyV(scope.row)" type="primary" size="small">还原</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!---分页-->
    <el-pagination
        @current-change="handleVideoCurrentChange"
        @size-change="handleVideoSizeChange"
        :current-page="ReviewParams.pageNum"
        :page-sizes="[4, 5, 10, 20]"
        :page-size="ReviewParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
      :total="ReviewParams.total"
        class="page">
    </el-pagination>

    <!-- 播放视频 -->
    <div class="videoDiv" v-if="dialogVideoVisible==true">
      <a @click="CloseV" class="vIcon el-icon-circle-close"></a>
      <video-player class="videoPlayer vjs-custom-skin" ref="videoPlayer" :options="Options">
      </video-player>
    </div>

    <!-- 单个审核 -->
    <el-dialog
      title="单个审核"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose">
      <div>
        <div class="videoBF">
          <video ref="videos" style="width: 100%; height: 100%;" :src="`http://101.43.223.224:8765/image/getVideoById?id=${videoId}`" controls crossorigin="anonymous">
          </video>
        </div>
        <div class="videoZBF">
          <div class="JT">
            <div class="wenzi">
              <span>视频抽帧截图</span>
            </div>
            <div class="xian"></div>
          </div>
          <div class="JTBF">
            <div class="JTpic" v-for="(item,index) in framez" :key="index">
              <img :src="item"/>
            </div>
          </div>
        </div>
        <div class="videoJS">
          <div class="part1">
            <span style="font-weight: bold;">视频ID：</span><span>{{ danSH.videoId }}</span>
          </div>
          <div class="part1 part2" v-tooltip :content="danSH.videoDesc">
            <el-popover
              placement="top-start"
              width="300"
              trigger="hover"
              :content="danSH.videoDesc">
              <span style="font-weight: bold;" slot="reference">视频文案：<span style="font-weight: 500;">{{ danSH.videoDesc }}</span></span>
            </el-popover>
          </div>
          <div class="part1">
            <span style="font-weight: bold;">上传者：</span><span>{{ danSH.userAccount }}</span>
          </div>
        </div>
        <div class="videoQT">
          <div class="pt1 pt2">
            <span style="font-weight: bold;">视频标签：</span>
            <el-tag
              style="margin-left: 5px;"
              v-for="(item,index) in tagItems"
              :key="index"
              effect="plain"
              v-if="index < 3">
              {{ item }}
            </el-tag>
            <div @click="onTag" class="clickable-div" v-if="tagItems.length>3" style="float:right;color:darkgray" slot="reference">更多标签</div>
            <div v-if="tagFlag" class="tagDiv">
              <el-tag
                style="margin-left: 5px;margin-top:5px"
                v-for="(item,index) in tagItems"
                :key="index"
                effect="plain">
                {{ item }}
              </el-tag>
            </div>
          </div>
          <div class="pt1 pt3">
            <el-button @click="SHe(reviewId=0)" type="primary" size="mini">审核通过</el-button>
            <el-button @click="SHe(reviewId=1)" type="warning" size="mini">审核拒绝</el-button>
            <el-button @click="SHqx" type="primary" size="mini" class="qx">取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 批量审核 -->
    <el-drawer title="批量审核" :visible.sync="dialogVideoFormVisible" :before-close="handleDialog2Close" direction="ttb" size="100%" :style="{ width: '87%', height: '100%',margin:'0% 13%' }">
      <div class="shq" ref="scrollContainer" @scroll="handleScroll">
        <div class="ReviewRq" v-for="(item,index) in RData" :key="index">
          <div class="videoBF2">
            <video ref="videoElement" style="width: 100%; height: 100%;" controls crossorigin="anonymous">
              <source :src="`http://101.43.223.224:8765/image/getVideoById?id=${item.videoNumber}`"/>
            </video>
          </div>
          <div class="videoZBF2">
            <div class="JT">
              <div class="wenzi">
                <span>视频抽帧截图</span>
              </div>
              <div class="xian"></div>
            </div>
            <div class="JTBF">
              <div class="JTpic" v-for="(item,index) in frames[index]" :key="index">
                <img :src="item"/>
              </div>
            </div>
          </div>
          <div class="videoJS">
            <div class="part1">
              <span style="font-weight: bold;color:dimgray">视频ID：</span><span>{{ item.videoId }}</span>
            </div>
            <div class="part1 part2">
              <el-popover
                placement="top-start"
                width="300"
                trigger="hover"
                :content="item.videoDesc"
                v-if="item.videoDesc && item.videoDesc.length > 35">
                <span style="font-weight: bold;color:dimgray" slot="reference">视频文案：<span style="font-weight: 500;color:black">{{ item.videoDesc }}</span></span>
              </el-popover>
              <span v-else>
                <span style="font-weight: bold;color:dimgray">视频文案：</span><span style="font-weight: 500; color: black">{{ item.videoDesc }}</span>
              </span>
            </div>
            <div class="part1">
              <span style="font-weight: bold;color:dimgray">上传者：</span><span>{{ item.userAccount }}</span>
            </div>
          </div>
          <div class="videoQT">
            <div class="pt1 pt2">
              <span style="font-weight: bold;color:dimgray">视频标签：</span>
              <el-tag
              style="margin-left: 5px;"
              v-for="(item,index) in tagItemz[index]"
              :key="index"
              size="small"
              effect="plain"
              v-if="index<3">
              {{ item }}
            </el-tag>
            <div @click="onTags" class="clickable-div" v-if="RData[index].videoTopic.split(',').length>3" style="float:right;color:darkgray" slot="reference">更多标签</div>
            <div v-if="tagsFlag&&RData[index].videoTopic.split(',').length>3" class="tagsDiv">
              <el-tag
                style="margin-left: 5px;margin-top:5px"
                v-for="(item,index) in tagItemz[index]"
                :key="index"
                effect="plain">
                {{ item }}
              </el-tag>
            </div>
            </div>
            <div class="pt1 pt3">
              <el-radio-group @input="onRadio(item.vid)" v-model="radio4[index]" size="mini" :key="index">
                <el-radio :label='0' border><span style="color:rgb(7, 215, 76)">审核通过</span></el-radio>
                <el-radio :label='1' border style="margin-left:48px"><span style="color:rgb(223, 151, 6)">审核拒绝</span></el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align:center" v-if="load==true">加载中.......</div>
      <div class="DB">
        <div class="db1">
          <el-button @click="AllSHe(reviewId=0)" type="success">全部审核通过</el-button>
          <el-button @click="AllSHe(reviewId=1)" type="warning">全部审核拒绝</el-button>
          <div class="db2">
            <el-button @click="SHe" type="primary">确认审核</el-button>
            <el-button @click="cancelShh" type="primary">取消</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
</div>
</template>

<script>
import {listData,listDataT,listDataW,SHData} from '@/api/video/videoReview';
import {delData} from '@/api/video/video';
import { Tooltip } from 'element-ui';
export default {
  directives: {
    tooltip: Tooltip
  },
    props: ['vrData','totalS','tabE','refreshFlag'],
    data() {
      return {
        //视频审核容器
        ReviewData: [],
        //批量审核视频容器
        RData:[],
        //视频审核列表分页参数
        ReviewParams:{
          pageNum:1,
          pageSize:4,
          total:0,
        },
        //批量审核分页参数
        RParams:{
          pageNum:1,
          pageSize:4,
          total:0,
        },
        //审核视频列表遮罩层
        loading:true,
        //批量审核视频刷新
        load:false,
        dialogVisible: false,
        //视频弹出框遮罩层
        dialogVideoVisible:false,
        //视频回显id
        videoShowId:'',
        //审核视频参数
        danSH:{
          videoNumber:'',
          videoId:'',
          videoDesc:'',
          userAccount:''
        },
        //视频标签回显
        tagItems:[],
        //视频标签回显
        tagItemz:[],
        //更多标签
        tagFlag:false,
        //更多标签
        tagsFlag:false,

        //审核视频回显id
        videoId:'',
        //批量审核视频容器
        videoIds:[],
        //视频抽帧截图
        frames: [],
        //视频抽帧截图
        framez:[],
        //批量审核视频弹窗
        dialogVideoFormVisible:false,
        //批量审核结果容器
        radio4:[],
        //视频封面放大
        srcList:[],
        //视频配置
        playerO: {
          // 视频 url
          sources: [{
            
          }],
          // 其他设置项
          controls: true,
          preload: "auto",
          aspectRatio: "16:9",
          playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
          fluid: true,
          language: "zh-CN",
          preload: "auto",
          // poster: 'http://101.43.223.224:8765/image/getImageById?id='+6613,
          notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息
        },
      }
    },

    mounted(){
      //视频审核列表
      this.getVideoReview()
      //批量审核视频数据
      this.getReviewVideo()
      //视频封面放大
      this.onImage()
    },

    methods:{
      //审核视频列表分页
      handleVideoSizeChange(pageSize) {
        this.ReviewParams.pageSize = pageSize
        this.getVideoReview()
      },
      //审核视频列表分页
      handleVideoCurrentChange(pageNum) {
        this.ReviewParams.pageNum = pageNum
        this.getVideoReview() 
      },

      //批量审核结果
      onRadio(vid){
        this.videoIds.push(vid)
      },

      //审核视频列表
      getVideoReview(){
        if(this.tabE==0){
          listData(this.ReviewParams).then(res =>{
            this.ReviewData = []
            this.ReviewData = res.data.content;
            this.ReviewParams.total = res.data.totalSize;
            this.loading = false;
            
          })
        }else if(this.tabE==1){
          listDataT(this.ReviewParams).then(res =>{
            this.ReviewData = []
            this.ReviewData = res.data.content;
            this.ReviewParams.total = res.data.totalSize;
            this.loading = false;
          })
        }else{
          listDataW(this.ReviewParams).then(res =>{
            this.ReviewData = []
            this.ReviewData = res.data.content;
            this.ReviewParams.total = res.data.totalSize;
            this.loading = false;
          })
        }
      },

      //批量审核视频数据
      getReviewVideo(){
        listData(this.RParams).then(res =>{
          this.RData = res.data.content;
          this.RParams.total = res.data.totalSize;
        })
      },

      //批量审核视频鼠标滚轮移动到浏览器底部刷新视频条数
      handleScroll() {
        const container = this.$refs.scrollContainer;
        // 检查是否滚动到底部
        if (container.scrollTop + container.offsetHeight >= container.scrollHeight && !this.isLoading) {
          this.load = true
          this.RParams.pageSize = this.RParams.pageSize + 6
          listData(this.RParams).then(res =>{
            this.RData = res.data.content;
            this.load = false
          })
          setTimeout(() => this.BatchReview());
        }
      },

      //单个审核
      SHe(reviewId){
        let videoIds = this.videoIds
        let reviewIds = []
        if(reviewId==0){
          reviewIds.push(0)
        }else if(reviewId==1){
          reviewIds.push(1)
        }else if(this.radio4){
          this.radio4.forEach(element => {
            reviewIds.push(parseInt(element))
          });
        }
        this.$modal.confirm('是否确认审核？').then(function() {
        return SHData(videoIds,reviewIds);
        }).then(res =>{
          if(res.flag==true){
            this.videoIds = []
            this.radio4 = []
            this.getVideoReview()
            this.dialogVisible = false
            this.$modal.msgSuccess("操作成功");
          }else{
            this.$modal.msgError("操作失败")
          }
        })
      },

      //审核取消
      SHqx(){
        this.dialogVisible = false
        this.framez=[]
        this.tagItems = []
        this.tagFlag = false
      },

      //批量审核取消按钮
      cancelShh(){
        this.dialogVideoFormVisible = false
        this.tagItemz = []
        this.frames = []
      },

      //全部审核
      AllSHe(reviewId){
        const videoIds = []
        const reviewIds = []
        this.RData.forEach(element => {
          videoIds.push(element.vid)
          reviewIds.push(reviewId)
        });
        this.$modal.confirm('是否确认审核？').then(function() {
        return SHData(videoIds,reviewIds);
        }).then(res =>{
          if(res.flag==true){
            this.getReviewVideo()
            this.dialogVisible = false
            this.$modal.msgSuccess("操作成功");
          }else{
            this.$modal.msgError("操作失败")
          }
        })

      },

      //更多视频标签
      onTag(){
        if(this.tagFlag == false){
          this.tagFlag = true
        }else{
          this.tagFlag = false
        }
      },

      //更多视频标签
      onTags(){
        if(this.tagsFlag == false){
          this.tagsFlag = true
        }else{
          this.tagsFlag = false
        }
      },

      //还原视频
      HyV(row){
        let videoIds = row.vid
        let reviewIds = []
        reviewIds.push(2)
        this.$modal.confirm('确定要还原视频吗？视频还原后需重新审核！').then(function() {
        return SHData(videoIds,reviewIds);
        }).then(res =>{
          if(res.flag==true){
            this.videoIds = []
            this.radio4 = []
            this.getVideoReview()
            this.dialogVisible = false
            this.$modal.msgSuccess("操作成功");
          }else{
            this.$modal.msgError("操作失败")
          }
        })
      },

      //下线视频
      deleteVideo(row){
        let videoIds = [row.vid]
        this.$modal.confirm('是否操作选中的这' + videoIds.length + '条数据项？').then(function() {
        return delData(videoIds);
        }).then(res =>{
          if(res.flag==true){
            this.getVideoReview()
            this.$modal.msgSuccess("操作成功");
          }else{
            this.$modal.msgError("操作失败")
          }
        })
      },

      //审核弹窗
      review(row){
        this.videoId = row.videoNumber
        this.videoIds = row.vid
        this.danSH = row
        const videoTag = row.videoTopic.split(',');
        videoTag.forEach(element => {
          this.tagItems.push(element)
        });
        this.dialogVisible = true
        this.$nextTick(() => {
        const checkVideoRendered = async () => {
          const videoElement = this.$refs.videos;
          if (videoElement) {
            // 在这里执行对视频元素的操作
            const videoElement = this.$refs.videos;
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = 91;
            canvas.height = 97;

            for (let i = 0; i < 12; i++) {

              if (isFinite(videoElement.duration)) {
              context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
              if(i!=12){
                const randomTime = Math.random() * videoElement.duration;
                videoElement.currentTime = randomTime;
                await new Promise(resolve => {
                videoElement.onseeked = () => resolve();
                });
                context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
                this.framez.push(canvas.toDataURL());
              }else {
                // videoElement.currentTime = videoElement.duration -1;
                // videoElement.muted = true;
                // videoElement.play();
                // const endedHandler = () => {
                //   // 清空画布并绘制最后一帧
                //   context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
                //   videoElement.muted = false;
                //   const lastImage = canvas.toDataURL(); // 将canvas内容转换为图片URL
                //   this.framez.push(lastImage);
                // };
                // videoElement.addEventListener('ended', endedHandler, { once: true }); 
              }
              
              }else {
                  console.log('视频未加载完成');
                  
                }
            }

            console.log('视频元素已渲染到 DOM 中');
          } else {
            console.log('视频元素未渲染到 DOM 中');
            
          }
        };

        checkVideoRendered();
      })
      },

      //审核弹窗关闭前操作
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.framez=[]
            this.tagItems = []
            this.tagFlag = false
          })
          .catch(_ => {});
      },

      //审核弹窗关闭前操作
      handleDialog2Close(done){
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.tagItemz = []
            this.frames = []
          })
          .catch(_ => {});
      },

      //批量审核
      async BatchReview(){
        this.getReviewVideo()
          const RwData = []
          const topData = []
          this.RData.forEach(element => {
            RwData.push(element.videoNumber)
            topData.push(element.videoTopic)
          });
          
          const tags = []
          for (let i = 0; i < topData.length; i++) {
            const tagz = topData[i].split(',')
            tagz.forEach(element => {
              tags.push(element);
            });
            this.$set(this.tagItemz, i, tags.slice()); // 使用 slice() 复制数组以确保触发响应式更新
            tags.length = 0; // 清空 tags 数组，准备下一次循环
          }

          this.dialogVideoFormVisible=true
          const videoE = this.$refs.videoElement
          if(videoE){
          for (let i = 0; i < RwData.length; i++) {
          const videoElement = this.$refs.videoElement[i];
          await this.captureFrames(videoElement, i);
        }
        }else{
          setTimeout(() => this.BatchReview(), 1000);
        }
      },
      async captureFrames(videoElement, index) {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = 91;
        canvas.height = 97;
        const frames = [];

        for (let i = 0; i < 12; i++) {
          if (isFinite(videoElement.duration)) {
            context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

            if (i !== 12) {
              const randomTime = Math.random() * videoElement.duration;
              videoElement.currentTime = randomTime;

              await new Promise((resolve) => {
                videoElement.onseeked = () => resolve();
              });

              context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
              frames.push(canvas.toDataURL());
            } else {
              // videoElement.currentTime = videoElement.duration - 0.02;
              // videoElement.muted = true;
              // videoElement.play();

              // const endedHandler = () => {
              //   context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
              //   videoElement.muted = false;
              //   const lastImage = canvas.toDataURL();
              //   frames.push(lastImage);
              // };

              // videoElement.addEventListener('ended', endedHandler, { once: true });
            }
          } else {
            console.log('视频未加载完成');
            // setTimeout(() => this.captureFrames(videoElement, index), 1000);
          }
        }

        this.$set(this.frames, index, frames);
        console.log(`视频元素 ${index} 已渲染到 DOM 中`);
      },

      //播放按钮
      onVideo(videoNumber){
          this.dialogVideoVisible=true;
          this.videoShowId = videoNumber;
        },

      //关闭视频弹窗
      CloseV(){
        this.dialogVideoVisible=false;
      },

      //放大视频封面
      onImage(coverNumber){
        this.srcList.push("http://101.43.223.224:8765/image/getImageById?id="+coverNumber)
      },

    },

  computed:{
    //播放视频路径
    Options() {
        if (this.videoShowId) {
          if(this.playerO.sources.length>0){
            this.playerO.sources.splice(0, 1);
          }
          this.playerO.sources.push({
            src: 'http://101.43.223.224:8765/image/getVideoById?id='+this.videoShowId,
            type: 'video/mp4',
          });
          return this.playerO;
        } else {
          return {}
        }
      },
  },

  watch:{
    // 模糊查数据条数
    totalS(newVal) {
      this.ReviewParams.total = newVal; // 监听totalS的变化，将新值赋给totalSize
    },
    vrData(newVal){
      this.ReviewData = newVal;
    },
    refreshFlag: function(newVal, oldVal) {
        if (newVal) {
            // 调用重新加载表格数据的方法
            this.getVideoReview();
        }
    }
  }
};
</script>

<style lang="less" scoped>
.row{
    margin-bottom: 10px;
  }
.page{
    margin-top: 15px;
    margin-left: 360px;
}
video::-webkit-media-controls-current-time-display {
  display: block !important;

}
.videoBF {
  width: 230px;
  height: 350px;
  background-color: rgb(22, 23, 23);
  float: left;
}
.videoBF2 {
  width: 230px;
  height: 350px;
  background-color: rgb(22, 23, 23);
  float: left;
  margin-left:10px;
  margin-top:5px;
}
.vd{
  z-index: 1;
}
.videoZBF {
  width: 400px;
  height: 350px;
  background-color: rgb(242, 242, 242);
  margin-left:250px;
  padding-top: 0.1px;
}

.videoZBF2 {
  width: 400px;
  height: 350px;
  background-color: rgb(242, 242, 242);
  margin-left:250px;
  padding-top: 0.1px;
}

.videoJS {
  width: 230px;
  height: 120px;
  background-color: rgb(242, 242, 242);
  margin-top: 20px;
  float: left;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.part1{
  width:230px;
  height:20px;
}
.part1:not(:first-child){
  margin-top:10px;
}

.part2{
  height:60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 设置为需要显示的行数 */
  -webkit-box-orient: vertical;
}

.videoQT {
  width: 400px;
  height: 120px;
  margin-top: 20px;
  margin-left:250px;
  padding-top: 0.1px;
}

.videoDiv{
  width:500px;
  height:280px;
  position: fixed;
  bottom: 320px;
  right: 430px;
}

.vIcon{
  font-size: 22px;
  color:rgba(249, 249, 249, 0.801);
  float: right;
  position: relative;;
  top: 5px;
  right: 5px;
  z-index: 1;
}

.pt1{
 width:310px;
 height: 30px;
 margin: 10px auto;
}

.pt2{
  height:40px
}

.pt3{
  margin-top:20px
}
.qx{
  margin-left:60px;
}
.JT {
  width: 380px;
  height: 20px;
  line-height: 20px;
  margin: 15px auto;
  margin-top: 15px;
}
.JTpic{
  width:91px;
  height:97px;
  display: inline-block;
  margin-left:5px;
  z-index: 1;
}
.pic{
  width:91px;
  height:97px;
  z-index: 9999;
}
.JTBF{
  width:380px;
  height:300px;
  
  margin-left:10px;
}

.JTpic:nth-child(1),
.JTpic:nth-child(5),
.JTpic:nth-child(9) {
  margin-left: 0px; /* 设置margin-left为0 */
}

.wenzi{
  float: left;
}
.xian{
  width:275px;
  height:9px;
  margin-left:105px;
  border-bottom: 1px solid rgb(106, 102, 102);
}
.ReviewRq{
  width:650px;
  height:500px;
  background-color: rgb(242, 242, 242);
  margin-left: 5px;
  margin-top:5px;
  display: block;
  float: left;
  position: relative;
}
.DB{
  width:100%;
  height:70px;
  padding-top:0.1px;
  float: left;
}
.db1{
  width:42%;
  height:36px;
  margin:0 auto;
  margin-top: 18px;
}
.db2{
  float: right;
}
.shq{
  width:1324px;
  height:600px;
  overflow-y: scroll;
}

.clickable-div {
  cursor: pointer;
}
.clickable-div:hover {
  content: "\f0c9"; /* 这里使用的是 Font Awesome 的鼠标点击图标 */
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  margin-left: 5px;
}

.tagDiv{
  width:325px;
  padding-bottom:5px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  position: relative;
  bottom: 30px;
  left: 378px;
}
.tagsDiv{
  width:330px;
  height: 80px;
  overflow-y: scroll;
  padding-bottom:5px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  position: relative;
  bottom: 140px;
  left: 0px;
}
.ellipsis{
  height: 110px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* 设置为需要显示的行数 */
  -webkit-box-orient: vertical;
}
</style>